import React from 'react';
import PropTypes from 'prop-types';
import { Table, Modal } from 'antd';
import styles from './List.less';
import classnames from 'classnames';
import AnimTableBody from '../../components/DataTable/AnimTableBody';
import { DropOption } from '../../components';
import { Link } from 'dva/router';
import moment from 'moment';

const confirm = Modal.confirm;

const List = ({ onDeleteItem, onEditItem, isMotion, location, ...tableProps }) => {
	const handleMenuClick = (record, e) => {
		if (e.key === '1') {
			onEditItem(record);
		} else if (e.key === '2') {
			confirm({
				title: '你确定删除该账号吗?',
				onOk() {
					onDeleteItem(record.id);
				},
			});
		}
	};

	const columns = [
		{
			title: '账号',
			dataIndex: 'username',
			key: 'username',
			className: styles.avatar
		}, {
			title: '昵称',
			dataIndex: 'nickName',
			key: 'nickName'
		}, {
			title: '手机号',
			dataIndex: 'mobile',
			key: 'mobile',
		}, {
			title: '所属角色',
			dataIndex: 'roleName',
			key: 'roleName'
		}, {
			title: '产品名称',
			dataIndex: 'productName',
			key: 'productName'
		}, {
			title: '状态',
			dataIndex: 'statusDesc',
			key: 'statusDesc'
		}, {
			title: '修改时间',
			dataIndex: 'utime',
			key: 'utime',
			render: (text) => {
				return moment(text).format('YYYY-MM-DD HH:mm:ss');
			},
		}, {
			title: '操作',
			key: 'operation',
			render: (text, record) => {
				return <DropOption onMenuClick={e => handleMenuClick(record, e)} menuOptions={[{ key: '1', name: '更新' }, { key: '2', name: '删除' }]} />;
			},
		},
	];

	const getBodyWrapperProps = {
		page: location.query.page,
		current: tableProps.pagination.current,
	};

	const getBodyWrapper = body => { return isMotion ? <AnimTableBody {...getBodyWrapperProps} body={body} /> : body; };

	return (
		<div>
			<Table
				{...tableProps}
				className={classnames({ [styles.table]: true, [styles.motion]: isMotion })}
				bordered
				columns={columns}
				simple
				rowKey={record => record.id}
				getBodyWrapper={getBodyWrapper}
			/>
		</div>
	);
};

List.propTypes = {
	onDeleteItem: PropTypes.func,
	onEditItem: PropTypes.func,
	isMotion: PropTypes.bool,
	location: PropTypes.object,
};

export default List;
